<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-lg font-medium flex items-center gap-2">
          <el-icon class="text-blue-600"><Location /></el-icon>
          车位信息
        </h2>
        <div class="text-sm text-gray-600">
          总车位：{{ parkingSpots?.length || 0 }}个 | 已占用：{{
            parkingSpots?.filter((ele) => ele.licensePlateList?.length > 0).length || 0
          }}
          个
        </div>
      </div>
      <div class="grid grid-cols-5 gap-6">
        <div
          v-for="(spot, index) in parkingSpots"
          :key="index"
          class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
        >
          <div class="text-sm text-gray-600 mb-2">
            车位：
            <el-text type="primary">{{ spot.parkingLocation }}</el-text>
          </div>
          <div class="flex flex-col gap-2">
            <div
              v-if="spot.licensePlateList && spot.licensePlateList.length > 0"
              class="flex items-center justify-between bg-blue-50 p-3 rounded"
            >
              <div class="text-base font-bold text-blue-600">
                {{ spot.licensePlateList[0].licensePlate }}
              </div>
              <el-tag type="success" size="small" class="!rounded-button whitespace-nowrap">
                装车中
              </el-tag>
            </div>
            <div v-else class="text-base font-medium text-gray-400 p-3 text-center">暂无车辆</div>
            <div class="mt-3">
              <div class="text-sm text-gray-600 mb-2">等待车辆</div>
              <div class="space-y-2">
                <div
                  v-if="!spot.licensePlateList"
                  class="text-base font-medium text-gray-400 p-3 text-center"
                >
                  暂无车辆
                </div>
                <div v-else>
                  <el-scrollbar height="200px" v-if="spot.licensePlateList.length > 1">
                    <div
                      v-for="(car, carIndex) in spot.licensePlateList.slice(1)"
                      :key="carIndex"
                      class="flex items-center justify-between bg-gray-50 p-3 rounded"
                    >
                      <div class="flex items-center">
                        <div class="text-sm font-medium text-blue-600 mr-2">{{ carIndex + 1 }}</div>
                        <div class="text-sm">{{ car.licensePlate }}</div>
                      </div>
                      <el-tag type="warning" size="small" class="!rounded-button whitespace-nowrap">
                        等待中
                      </el-tag>
                    </div>
                  </el-scrollbar>
                  <div v-else>
                    <div class="text-base font-medium text-gray-400 p-3 text-center h-[200px]">
                      暂无车辆
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
import parkingSpaceInquiryApi, {
  parkingSpaceInquiryQuery,
  parkingSpaceInquiry,
  parkingSpaceInquiryResult,
} from "@/api/LogisticsManagement/parkingSpaceInquiry";

const parkingSpots = ref<parkingSpaceInquiryResult[]>();
const total = ref(0);
const queryParams = reactive<parkingSpaceInquiryQuery>({
  pageNum: 1,
  pageSize: 10,
  spotType: 0,
});

const handleQuery = () => {
  parkingSpaceInquiryApi.pageQuery(queryParams).then((res) => {
    parkingSpots.value = res.list;
    total.value = res.total;
  });
};
onMounted(() => {
  handleQuery();
});
</script>

<style scoped></style>
